<template>
  <div class="page">
    <div class="content">
      <CellGroup inset>
        <Field v-model="phone" label-width="1.4rem" center type="tel" label="手机号" placeholder="请输入手机号" maxlength="11">
          <template #button>
            <div v-if="codeTime == 0" class="button1" @click="getCode()">获取验证码</div>
            <div v-else class="button1">{{ codeTime }}</div>
          </template>
        </Field>
        <Field v-model="code" maxlength="6" center label-width="1.4rem" label="验证码" placeholder="请输入短信验证码" />
        <div class="button2">
          <div @click="bind()">绑定</div>
        </div>
      </CellGroup>

    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getSmsCode, mobileBind } from '@/api/userApi'
import { Toast, Field, CellGroup } from 'vant'
import { getUrl } from '@/utils/auth'
export default defineComponent({
  components: { Field, CellGroup },
  setup() {
    const router = useRouter()
    const store = useStore()
    const phone = ref<string>('')
    const code = ref<string>('')
    const codeTime = ref<number>(0)
    const bind = () => {
      if (!phone.value) {
        Toast({
          message: '请输入手机号',
          position: 'bottom'
        })
        return
      }
      if (!code.value) {
        Toast({
          message: '请输入验证码',
          position: 'bottom'
        })
        return
      }
      mobileBind({
        mobile: phone.value,
        smscode: code.value
      }).then((res: any) => {
        console.log(res)
        if (res.success) {
          Toast({
            message: '手机号绑定成功',
            position: 'bottom'
          })
          store.commit('user/SET_MOBILE', res.data.mobile)
          const beforeLoginUrl = getUrl()
          if (beforeLoginUrl) {
            window.location.replace('/#' + beforeLoginUrl)
          } else {
            router.replace({ name: 'ConfirmWork' })
          }
        }
      })
    }
    const getCode = () => {
      if (!phone.value) {
        Toast({
          message: '请输入手机号',
          position: 'bottom'
        })
        return
      }
      if (
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          phone.value
        )
      ) {
        Toast({
          message: '请填写正确的手机号',
          position: 'bottom'
        })
        return
      }
      getSmsCode(phone.value).then(() => {
        Toast({
          message: '验证码发送成功',
          position: 'bottom'
        })
        codeTime.value = 60
        const timeId = setInterval(() => {
          if (codeTime.value > 0) {
            codeTime.value--
          } else {
            clearInterval(timeId)
            codeTime.value = 0
          }
        }, 1000)
      })
    }
    onBeforeUnmount(() => {
      store.dispatch('user/loginOut')
    })
    return {
      bind,
      getCode,
      code,
      phone,
      codeTime
    }
  }
})
</script>
<style lang="scss" scoped>
.page {
  background: #f7f7f7;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15vh;
}
.content {
  width: 680px;
  background: #ffffff;
  border-radius: 10px;
  padding-top: 58px;
}
.button1 {
  color: #56b6ff;
  font-size: 26px;
}
.button2 {
  padding: 58px 9px;
  text-align: center;
  div {
    width: 600px;
    height: 90px;
    background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
    border-radius: 10px;
    color: #ffffff;
    font-size: 40px;
    line-height: 90px;
  }
}
</style>

